<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本转音频处理器</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <script src="{{ url_for('static', filename='script.js') }}" defer></script>
</head>
<body>
    <div class="container">
	<span id="advanced-settings-btn">高级设置</span><span id="help-btn">&#10084; 新版/帮助</span>
        <h1>听书狂人文本转语言处理机</h1>
        <form id="text-form">
            <textarea name="text" id="text" rows="10" cols="50" placeholder="粘贴你的文本内容">{{ sentence }}</textarea><br>
            <div class="form-row">
    <div class="input-group">
        <input type="text" name="filename" id="filename" placeholder="可选文件名">
        <button type="button" id="clear-filename-btn" class="clear-filename-btn" style="margin-left:-38px;">&#xD7; </button>
    </div>
    <div class="input-group">
        <select id="speaker-dropdown" name="speaker">
            <!-- 动态加载讲述人选项 -->
        </select>
        <button type="button" id="edit-speaker-btn" class="edit-btn">&#9998;</button>
    </div>
</div>
<div class="form-row">
                <input type="submit" value="{{ '继续处理' if unfinished else '提交' }}" id="submit-btn">
    <button type="button" id="stop-btn">停止</button>
    <button type="button" id="refresh-btn">刷新</button>
    <button type="button" id="fix-gaps-btn" style="display: none;">修复断层</button>
    <button type="button" id="merge-btn">马上合并</button>
</div>
        </form>
        <div id="status">{{ '上次中断于：' + progress_sentence if unfinished else '' }}</div>
		<div id="merge-status"></div>

        <div id="fix-progress" style="margin-top: 20px; display: none;"></div>

        <div id="progress-container">
            <div id="progress-bar"></div>
        </div>
        <div id="unfinished-sentence">{{ progress_summary }}</div>
        <div id="detailed-info"></div>
        <div id="merge-feedback"></div>
        <button id="clear-btn" style="display: {{ 'inline-block' if unfinished else 'none' }};">清空且停止</button>

        <!-- 浮窗表单 -->
        <div id="edit-speaker-modal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>编辑讲述人</h2>

                <div id="speaker-list">
                    <!-- 讲述人列表将动态加载到这里 -->
                </div>

                <input type="text" id="new-speaker-name" placeholder="输入新的讲述人">
                <button type="button" id="add-speaker-btn">添加讲述人</button>
            </div>
        </div>

        <!-- 高级设置浮窗 -->
        <div id="advanced-settings-modal" class="modal">
            <div class="modal-content">
                <span id="close-settings-btn" class="close">&times;</span>
                <h2>高级设置</h2>
                <input id="custom-settings-input"  placeholder="请输入带端口号的接口地址"><br />
				<input id="custom-settings-liushi"  placeholder="设置为0语句更连贯，设置为1语句更碎花"><br />
				<button id="update-setting-btn">更改</button>
                <button type="button" id="restore-defaults-btn">恢复默认</button>
            </div>
        </div>
		
<!-- 帮助弹窗 -->
<div id="help-modal" class="modal">
    <div class="modal-content help-content">
        <span class="close-help">&times;</span>
        <h2>使用说明</h2>
        <div id="help-text">
            <!-- 动态加载的帮助文档内容将插入到这里 -->
        </div>
    </div>
</div>
		
		<!-- 捐助弹窗 -->
		<div id="donate-modal" class="modal">
    <div class="modal-content donate-content">
        <span class="close-donate">&times;</span>
        <h2>支持我们</h2>
        <div class="donate-text">
            <!-- 在这里放置捐助的相关内容 -->
            <p>感谢您对我们的支持！您的捐助将帮助我们继续改进和维护这个项目。</p>
        </div>
    </div>
		</div>
</div>
    </div>
</body>
</html>
